<template>
  <Nav :theme="theme" />
  <div id="main">
    <router-view></router-view>
  </div>
</template>
<script setup>
import Nav from '@/components/header.vue'
import config from '@/config'
import { createAppKit } from '@reown/appkit/vue'
import { watch ,ref} from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const theme = ref('') // dark light
let initMetamask = async () => {
  const metadata = {
    name: 'My Website',
    description: 'My Website description',
    url: 'http://192.168.0.12:5173',
    icons: ['https://th.bing.com/th/id/ODF.3FnYreHzuxgT06R7hWjvyQ?w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2']
  }
  const appKit = createAppKit({
    adapters: [config.wagmiAdapter],
    networks: config.networks,
    projectId: config.projectId,
    metadata,
    features: {
      analytics: true
    },
    customChainImages: {
      9988: 'https://can.ihaichain.com/assets/logo-2c7ac430.png'
    }
  })
}

initMetamask()


watch(() => route.path, (val) => {
  // console.log(route.meta);
  theme.value = route.meta.headerTheme || 'light'
})
</script>
